<template>
<!-- v-on: 
    作用 注册事件
    语法: 
    1. v-on:事件名= "要执行的少量代码"
    2. v-on:事件名="methods中的函数名"
    3. v-on:事件名="methods中的函数名(传参1, 传参2,...)"
    简写 v-on => @
 -->
  <div>
    <h3>查看银行卡余额 -- {{ money}}</h3>
    <button @click="money++">搬砖 +1</button>
    <button @click="money+=2">搬砖 +2</button>
    <button @click="addMoney">开小卖部</button>

    <button @click="eat('销冠')">请销冠吃饭</button>
    <button @click="eat('秘书')">请秘书吃饭</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 666
    }
  },
  // methods属性是放vue的方法(函数)
  //methods中可以访问data中的数据 通过this获取
  methods: {
    addMoney() {
      // 租金3000 人工  4000  收入 20000
      console.log(this.money);
      this.money = this.money -3000 -4000 +20000
    },
    eat(person) {
      if (person === '销冠') {
        this.money = this.money -2000
      }
      if (person === '秘书') {
        this.money = this.money -20000
      }
    }
  }
}
</script>

<style>

</style>